<div class="card" [class.bg-dark]="isSubscribing" [class.text-light]="isSubscribing">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="card-title">
      {{ topic.name | humanize }}
      <small class="text-muted">({{ topic.type }})</small>
    </h5>

    <button class="btn btn-outline-success btn-sm btn-title" (click)="toggleSubscription(!isSubscribing)" [class.active]="isSubscribing">{{ isSubscribing ? 'Unsubscribe' : 'Subscribe' }}</button>
  </div>

  <div class="card-body-sm" *ngIf="topic.info">
    <form class="d-flex">
      <app-type [info]="topic.info" [data]="input" [readonly]="isSubscribing"></app-type>

      <button class="btn btn-secondary align-self-end" type="button" [disabled]="isSubscribing" (click)="publish()">Publish</button>
    </form>
  </div>
</div>
